<template>
  <div>
    <div class="baseInfo">
      <div class="section-header">
        <div class="section-mark" style="border-left-color: rgb(35, 98, 251)"></div>
        <div class="section-title">基本信息</div>
      </div>
      <div class="body">
        <a-row :gutter="16">
          <a-col :span="12" v-for="item in baseInfolist" :key="item.id">
            <div class="item">
              <div class="title">{{ item.title }}</div>
              <div class="value">
                <div class="value-editable">
                  <span>{{ item.value }}</span>
                </div>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
    <div class="baseInfo">
      <div class="section-header">
        <div class="section-mark" style="border-left-color: rgb(35, 98, 251)"></div>
        <div class="section-title">系统信息</div>
      </div>
      <div class="body">
        <a-row :gutter="16">
          <a-col :span="12" v-for="item in systemInfolist" :key="item.id">
            <div class="item">
              <div class="title">{{ item.title }}</div>
              <div class="value">
                <div class="value-editable">
                  <span>{{ item.value }}</span>
                </div>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    baseInfolist: Array,
    systemInfolist: Array,
  },
  data() {
    return {

    }
  },
  methods: {
    handleChange(e) {
      this.res = e.target.value
      const value = e.target.value
      this.$emit('change', value)
    },
  },
}
</script>

<style lang="less" scoped>
// 详细资料
.baseInfo {
  .section-header {
    display: flex;
    align-items: center;

    .section-mark {
      border-left-width: 4px;
      border-left-style: solid;
      height: 14px;
      border-radius: 2px;
    }

    .section-title {
      font-size: 14px;
      color: #333;
      font-weight: 600;
      margin-left: 8px;
      flex-shrink: 0;
    }
    .section-button {
      margin-left: auto;
    }
  }

  .body {
    margin: 10px;
  }
}

.item {
 display: flex;
  align-items: flex-start;
  height: 60px;
  .title {
    width: 100px;
    flex-shrink: 0;
  }
  .value {
    flex: 1;
    .value-edit {
      display: flex;
      align-items: center;
    }
    .value-editable {
      display: flex;
      align-items: center;
    }
  }
}
</style>
